<?php
/**
 * Created by aOmMiez
 * User: aOmMiez
 * Date: 1/29/13 AD
 * Time: 11:04 AM
 * Powered By Pla two fusion Co., Ltd
 */

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport"   content="width=device-width,  minimum-scale=1.0, maximum-scale=1.0" />
    <title>Capsule Setting</title>
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>
<style>
        /*------------------------------------*\
            $IPHONE
        \*------------------------------------*/
    @media screen and (max-device-width: 480px){
        body {
            color: #333333;
            font-family:Helvetica, Arial, Verdana, sans-serif;
            padding:5px;
            background-color: #e1e1e1;
        }

        div {
            clear:both!important;
            display:block!important;
            width:100%!important;
            float:none!important;

        }
        img {
            max-width:100%;
            height:auto;
        }
        .boxShadow4 {
            -moz-box-shadow: 0 0 4px #888;
            -webkit-box-shadow: 0 0 4px#888;
            box-shadow: 0 0 4px #888;
            background-color: #ffffff;
        }
        .radius4 {
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

        .textHead1 {
            font-size: 16px;
            font-weight: bolder;
            color: #636363;
        }


        input[type="checkbox"] {
            display:none;
        }

        input[type="checkbox"] + label span {
            display:inline-block;
            width:19px;
            height:19px;
            margin:-1px 4px 0 0;
            vertical-align:middle;
            background:url('/images/No2x.png') left top no-repeat;
            cursor:pointer;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        input[type="checkbox"]:checked + label span {
            background:url('/images/Yes2x.png') -19px top no-repeat;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            display:inline-block;
            width:19px;
            height:19px;
            margin:-1px 4px 0 0;
            vertical-align:middle;
            background:url('/images/Yes2x.png') left top no-repeat;
            cursor:pointer;
        }

        a {

        }
    }

</style>
<div style="width: 480px">
    <div class="boxShadow4 radius4" style="padding: 6px 0px 6px 0px;"><span style="margin-left: 10px;">Allow Follower</span> <span style="float: right;margin-right: 30px;"><input type="checkbox" id="c1" name="cc"  />
            <label for="c1"><span></span></label></span>
    </div>
    <div class="boxShadow4 radius4" style="height: 100px; line-height: 26px;margin-top: 16px;">
        <div style="padding-top: 10px;">
            <span style="margin-left: 10px;">Follower Approvd</span>  <span style="float: right;margin-right: 30px;"><input type="checkbox" id="c2" name="cc"  />
            <label for="c2"><span></span></label></span>
        </div>
        <div style="text-align: center;">
            <span style="margin-left:10px;font-size: 11px;">New follower has to wait for your approvd <br>( Not affect earlier follower )</span>
        </div>
    </div>
    <div class="boxShadow4 radius4" style="margin-top: 16px;padding-bottom: 10px;font-size: 12px;">
        <div class="textHead1" style="padding: 10px 0px 10px 10px;">Permission</div>
        <div >
            <span style="margin-left: 10px;">- See your favarite place list</span>  <span style="float: right;margin-right: 30px;"><input type="checkbox" id="c3" name="cc"  />
            <label for="c3"><span></span></label></span>
        </div>
        <div style="margin-top: 10px;">
            <span style="margin-left: 10px;">- Share your Capsule</span>  <span style="float: right;margin-right: 30px;"><input type="checkbox" id="c4" name="cc"  />
            <label for="c4"><span></span></label></span>
        </div>
        <div style="margin-top: 10px;">
            <span style="margin-left: 10px;">- Comment on your Capsule</span>  <span style="float: right;margin-right: 30px;"><input type="checkbox" id="c5" name="cc"  />
            <label for="c5"><span></span></label></span>
        </div>
        <div style="margin-top: 10px;">
            <span style="margin-left: 10px;">- Reply your Capsule</span>  <span style="float: right;margin-right: 30px;"><input type="checkbox" id="c6" name="cc"  />
            <label for="c6"><span></span></label></span>
        </div>


    </div>
</body>
</html>